<template>
  <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;">
    <div id="tools" style="text-align : right">
      <span class="layui-layer-setwin">
      <a @click="closeEvent" class="layui-layer-ico layui-layer-close2" href="javascript:;"></a>
    </span>
      <span class="layui-layer-resize"></span>
    </div>
    <div style="overflow-y:scroll;height:150px" id="tableContainer">
      <table id="tab"></table>
    </div>
  </div>
</template>
<script>
  //import from '@/assets/css/pretty.css'

  export default {
    name: 'bubble',
    data() {
      return {
        scenePosition: null, // 记录在场景中点击的笛卡尔坐标点
        dock: false, // 是否停靠
        infoboxContainer: undefined,
        table: undefined
      }
    },
    mounted() {
    },
    methods: {
      closeEvent: function () {
        $("#bubble").hide();
      },
      StartQuery(datasetName) {
        viewer.scene.postRender.addEventListener(function () {
          // 每一帧都去计算气泡的正确位置
          if (scenePosition) {
            var canvasHeight = viewer.scene.canvas.height;
            var windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(
              viewer.scene,
              scenePosition,
              windowPosition
            );
            infoboxContainer.style.bottom =
              canvasHeight - windowPosition.y + 45 + "px";
            infoboxContainer.style.left = windowPosition.x - 70 + "px";
            infoboxContainer.style.visibility = "visible";
          }
        });
        /* 气泡相关 1/4 end */

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (e) {
          var position = viewer.scene.pickPosition(e.position);
          if (!position) {
            position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
          }
          scenePosition = position; // 气泡相关 2/4
          infoboxContainer = document.getElementById("bubble");
          table = document.getElementById("tab");
          var selectLayer = viewer.scene.layers.getSelectedLayer();
          if (selectLayer != undefined) {
            var selections = selectLayer.getSelection();
            if (selections.length > 0) {
              var selectID = selections[0];
              var sqlfilter = "SmID =" + selectID;
              var queryParame = new SuperMap.REST.GetFeaturesBySQLParameters({
                queryParameter: new SuperMap.REST.FilterParameter({
                  attributeFilter: sqlfilter
                }),
                toIndex: -1,
                datasetNames: ["vdata:" + datasetName]//["vdata:" + "moxingzhenshhixiugai"]
              });
              var url =
                "http://localhost:8090/iserver/services/data-vdata/rest/data";
              var getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(
                url,
                {
                  eventListeners: {
                    processCompleted: onQueryComplete,
                    processFailed: processFailed
                  }
                }
              );
              getFeatureBySQLService.processAsync(queryParame);

            }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
    }
  };

  function onQueryComplete(params) {
    var selectedFeature = params.originResult.features[0]; // 选中楼层的楼层面信息对象
    if (!selectedFeature) {
      /* 气泡相关 3/4 start */
      scenePosition = null;
      $("#bubble").hide();
      /* 气泡相关 3/4 end */
      return;
    }
    /* 气泡相关 4/4 start */
    $("#bubble").show();
    for (var i = table.rows.length - 1; i > -1; i--) {
      table.deleteRow(i);
    }
    for (var index in selectedFeature.fieldNames) {
      var newRow = table.insertRow();
      var cell1 = newRow.insertCell();
      var cell2 = newRow.insertCell();
      cell1.innerHTML = selectedFeature.fieldNames[index];
      cell2.innerHTML = selectedFeature.fieldValues[index];
    }
    /* 气泡相关 4/4 end */
  }

  function processFailed(params) {
    alert("fail");
  }
</script>
<style>
</style>
